<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层模型(Layer)</title>
    <style type="text/css">
    </style>
</head>

<body>
<!-- 三大类: 
1. position:relative  相对定位
2. position:absolute  绝对定位
3. position:fixed     固定定位

相同点: 可以设置方位top/bottom/left/right  +  z-index 提高层级

区别:
1.是否脱离文档流 （覆盖 +  叠加）
-  脱离: 绝对定位  +  固定定位  
-  不脱离: 相对定位（用来作为参照物）

2.参照物(基点)
- 相对定位 - 自己本身
- 绝对定位  - 先看自己的父元素有没有position,
  + 没有  就会往上进行查找，直到找到最外层的html
  + 有    参照物 - 父元素
- 固定定位 - 浏览器窗口

-->

<!-- 布局(PC) -  display:inline/block/inline-block  +  float +  position  -->
</body>

</html>